<template>
    <div class="app-container">
        <!-- 搜索 -->
        <el-row type="flex" justify="end" style="margin-bottom: 20px">
            <!-- 根据姓名搜索 -->
            <el-col :span="3" style="margin-right: 10px;">
                <el-input
                    v-model.trim="params.building"
                    placeholder="请输入楼栋名"
                    clearable
                    @clear="getBuilding"
                ></el-input>
            </el-col>
            <!-- 搜索重置按钮 -->
            <el-button type="primary" @click="getBuilding" icon="el-icon-search"></el-button>
            <el-button type="primary" @click="reset">重置</el-button>
            <!-- <el-button type="primary" @click="addDialog = true;">批量添加房间</el-button> -->
        </el-row>
        <!-- 表格展示 -->
        <el-table :data="tableData" v-loading="loading" stripe border>
            <el-table-column type="selection"></el-table-column>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="building" label="楼栋号"></el-table-column>
            <el-table-column prop="living" label="所在生活区"></el-table-column>
            <el-table-column prop="housemaster" label="负责宿管"></el-table-column>
            <el-table-column prop="numRoom" label="寝室总数"></el-table-column>
            <!-- 操作按钮 -->
            <el-table-column label="操作" width="240">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                    <el-button
                        size="mini"
                        type="warning"
                        @click="addRoomShow(scope.$index, scope.row)"
                    >添加房间</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 编辑弹出框 -->
        <el-dialog :visible.sync="editDialog" title="编辑楼栋">
            <el-form>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="楼栋号" :label-width="formLabelWidth">
                            <el-input v-model="editForm.building"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="生活区" :label-width="formLabelWidth">
                            <el-input v-model="editForm.living" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="负责宿管" :label-width="formLabelWidth">
                            <el-input v-model="editForm.housemaster" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="寝室设置" :label-width="formLabelWidth">
                            <el-input placeholder="共多少楼层，例：1" v-model="editForm.buildingNum">
                                <template slot="append">层</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6.5">
                        <el-form-item>
                            <el-input placeholder="单层寝室数，例：250" v-model="editForm.roomNum">
                                <template slot="append">间</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6.5">
                        <el-form-item>
                            <el-input placeholder="单个寝室人数，例：4" v-model="editForm.totalNumber">
                                <template slot="append">人</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>-->
                <!-- 提交重置按钮 -->
                <el-row>
                    <el-col style="display: flex; justify-content: center;margin-top: 40px;">
                        <el-form-item>
                            <el-button type="primary" @click="editSubmitForm()">提交</el-button>
                            <el-button @click="resetForm()">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
        <!-- 添加房间弹出框 -->
        <el-dialog :visible.sync="addRomDialog"></el-dialog>
        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageCurrent"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
    </div>
</template>
<script>
import { getBuilding, deleteBuilding, updateBuilding, saveRoom } from "@/api/building"
export default {
    data() {
        return {
            tableData: [],
            loading: false,
            editDialog: false,
            addRomDialog: false,
            formLabelWidth: "70px",
            // 楼栋
            buildingList: [],
            // 生活区
            livingList: [],
            // 房间数
            numRoom: "",
            // 请求参数
            params: {
                building: "",
                living: "",
                pageCurrent: 0,
                pageSize: 10
            },
            // 表格总条数
            total: 0,
            // 编辑表单数据
            editForm: {
                id: "",
                building: "",
                living: "",
                livingId: "",
                buildingId: "",
                buildingNum: "",
                roomNum: "",
                totalNumber: "",
                housemaster: ""
            }
        }
    },
    created() {
        this.getBuilding()
    },
    methods: {
        // 分页
        // 监听页码变化
        handleCurrentChange(newPage) {
            this.params.pageCurrent = newPage
            this.getBuilding()
        },
        // 监听size变化
        handleSizeChange(newSize) {
            this.params.pageSize = newSize
            this.getBuilding()
        },
        // 获取楼栋数据
        getBuilding() {
            getBuilding(this.params).then((res) => {
                this.loading = true
                setTimeout(() => {
                    console.log('楼栋管理');
                    this.tableData = res.data.records
                    this.total = Number(res.data.total)
                    console.log(res);
                    this.loading = false
                }, 200);

            })
        },
        // 删除功能
        async handleDelete(index, row) {
            const confirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch((err) => err)
            if (confirm !== 'confirm') {
                return this.$message.info("已取消删除")
            }
            // 确定删除
            deleteBuilding(row.id).then((res) => {
                if (res.code !== "200") {
                    this.$message.error("删除失败")
                } else {
                    this.$message.success("删除成功")
                    this.getBuilding();
                }
            })
        },
        // 编辑功能
        handleEdit(index, row) {
            console.log(row.id);
            this.editDialog = true
            this.editForm = JSON.parse(JSON.stringify(row))
        },
        // 提交编辑
        editSubmitForm() {
            updateBuilding({
                building: this.editForm.building,
                id: this.editForm.id,
                livingId: this.editForm.livingId,
            })
                .then((res) => {
                    this.editDialog = false
                    this.getBuilding()
                })
        },
        // 展示添加房间弹出框
        addRoomShow(index, row) {
            this.addRomDialog = true
        },



        // 重置按钮
        resetForm() {
            this.editForm.building = ""
        },
        // 搜索重置
        reset() {
            this.params.living = "";
            this.params.building = "";
            getBuilding(this.params).then((res) => {
                this.loading = true;
                setTimeout(() => {
                    this.tableData = res.data.records;
                    this.loading = false;
                }, 200);
            });
        },
    },
}
</script>
<style>
.el-input-group__append,
.el-input-group__prepend {
    background-color: #fff;
}
</style>
